<template>
  <div class="app-container">
    <div class="tabs-container">
      <div class="tabs-left">
        <el-tag
          :key="tag.route_name"
          @click="clickTag(tag)"
          @close="closeTag(tag)"
          closable
          v-for="tag in getKeepAlive">
          {{ tag.title }}
        </el-tag>
      </div>
      <el-dropdown @command="handleCommand" class="tabs-right">
        <el-button size="small" type="primary">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="closeAllTags">关闭所有标签</el-dropdown-item>
          <el-dropdown-item command="closeOtherTags">关闭其他标签</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="main-container">
      <transition mode="out-in" name="fade">
        <keep-alive :include="getKeepAliveComponentNames">
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>
	import {mapActions, mapGetters} from 'vuex'

	export default {
		name: 'MainContainer',
		data() {
			return {
				//tags: ['标签一', '标签二', '标签三', '标签四']
			}
		},
		computed: {
			...mapGetters('user', ['getKeepAlive', 'getKeepAliveComponentNames', 'getActiveRoute'])

		},
		methods: {
			...mapActions('user', ['removeKeepAlive', 'setActiveRoute', 'removeAllKeepAlive', 'addKeepAlive']),
			closeTag(tag) {
				this.removeKeepAlive(tag)
				this.setActiveRoute(null)
			},
			clickTag(tag) {
				this.setActiveRoute(tag)
				this.$router.push({name: tag.route_name})
			},
			handleCommand(command) {
				switch (command) {
					case 'closeAllTags':
						this.removeAllKeepAlive()
						this.setActiveRoute(null)
            this.$router.push({name: 'dashboard'})
						break
					case 'closeOtherTags':
						// 删除所有
						this.removeAllKeepAlive()
						// 取出当前激活的路由,放入到keepAlive里面
						this.addKeepAlive(this.getActiveRoute)
						this.setActiveRoute(null)
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  @import "./src/style/mixin";

  .app-container {
    .tabs-container {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tabs-left {
        span:nth-child(n+2) {
          margin-left: 5px;
        }
      }

      .tabs-right {
        button {
          padding: 0;
          @include icon(30px, #FFF)
        }
      }
    }

    .main-container {
      height: calc(100% - 56px);
    }
  }
</style>
